<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料"></van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
      <van-cell is-link title="头像" center>
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="user.photo"
        />
      </van-cell>
      <!-- is-link: 在单元格右侧显示箭头 -->
      <van-cell is-link title="名称" :value="user.name" @click="showName=true"/>
      <van-cell is-link title="性别" :value="user.gender === 0 ? '男' : '女'" @click="showGender=true"/>
      <van-cell is-link title="生日" :value="user.birthday" @click="showBirthday=true"/>
    </van-cell-group>
  </div>
</template>

<script>

  // 获取用户个人资料
  import { reqGetUserProfile } from '@/api/user.js'

  export default {
    name: 'userProfile',
    data () {
      return {
        // 控制弹层
        showName: false,
        showGender: false,
        showBirthday: false,
        // 当前用户的信息
        user: {}
      }
    },
    created () {
      this.getUserInfo()
    },
    methods: {
      // 获取用户个人资料
      async getUserInfo () {
        const res = await reqGetUserProfile()
        this.user = res.data.data
      }
    }
  }
</script>

<style lang="scss">

</style>
